<template>
  <div id="wrapper">
    <a-input-search placeholder="input search text" enter-button @search="onSearch" />
    <br> <br>
    <a-table :columns="columns" :data-source="searchList" rowKey="id">
      <img slot="thumbnails" slot-scope="thumbnails" :src="thumbnails" style="width: 222px;height: 322px"></img>
    </a-table>
  </div>
</template>

<script>

  export default {
    name: 'landing-page',
    data() {
      return {
        searchList: [],
        columns: [
          {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
          },{
            title: '作者',
            dataIndex: 'author',
            key: 'author',
          },{
            title: '书名',
            key: 'name',
            dataIndex: 'name',
          },{
            title: '封面',
            key: 'thumbnails',
            dataIndex: 'thumbnails',
            scopedSlots: { customRender: 'thumbnails' },
          },
          {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
          },
          {
            title: '出版社',
            key: 'publisher',
            dataIndex: 'publisher',
          }],
      };
    },
    methods: {
      async onSearch(value) {
        let data = {
          search: value,
          pageSize: 8,
          currentPage: 1
        };
        const formData = new FormData();
        Object.keys(data).forEach((key) => {
          formData.append(key, data[key]);
        });
        const res = await this.$http.post("http://xue.bookln.cn/books/searchBooks", formData);
        this.searchList = JSON.parse(res.data.data).pageData;
        console.log(this.searchList);
      },
    }
  }
</script>

<style>

</style>
